<template>
  <div
    :style="{ margin: '24px 16px', padding: '24px', backgroundColor: '#FFF' }"
  >
    <a-table
      bordered
      :columns="columns"
      :data-source="repairDatas"
      rowKey="repairId"
      :pagination="false"
    >
      <template slot="state" slot-scope="state">
        <a-tag v-if="state === 1" color="green">已完成</a-tag>
        <a-tag v-if="state === 2" color="orange">待维修</a-tag>
        <a-tag v-if="state === 3" color="red">待审核</a-tag>
      </template>
      <template slot="action" slot-scope="action">
        <a @click="showModal(action)">详情</a>
      </template>
    </a-table>
    <a-modal v-model="modalVisible" title="报修详情" @ok="handleOk">
      <div>
        <img
          width="100%"
          src="https://www.bing.com/th?id=OHR.WCDBabyElephant_ZH-CN7844400740_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=HpEdgeAn"
        />
        <div class="modal-name">
          <a-icon type="user" />
          <span>孙博霆 </span>
          <a-icon type="pushpin" />
          <span>18560640741</span>
        </div>
        <div class="modal-context">
          <span>厕所冲水之后水流停不下来，墙壁四周漏水</span>
        </div>
        <div>
          <a-icon type="environment" />
          <span style="margin-left: 5px">西区 11公寓 533</span>
        </div>
        <div>
          <a-icon type="clock-circle" />
          <span style="margin-left: 5px">2020-12-4 16:13:25</span>
        </div>
      </div>
      <div style="margin-top:20px">
        <a-timeline>
          <a-timeline-item>创建维修点</a-timeline-item>
          <a-timeline-item>审核通过</a-timeline-item
          >
          <a-timeline-item color="red">
            <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px" />
             分派维修师傅
          </a-timeline-item>
          <a-timeline-item
            >维修完成</a-timeline-item
          >
        </a-timeline>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { log } from "@antv/g2plot/lib/utils";
const columns = [
  {
    title: "报修单号",
    key: "repairId",
    dataIndex: "repairId",
  },
  {
    title: "报修人学号",
    key: "studentName",
    dataIndex: "studentName",
  },
  {
    title: "当前状态",
    key: "state",
    dataIndex: "state",
    scopedSlots: { customRender: "state" },
  },
  {
    title: "审核人",
    key: "adminName",
    dataIndex: "adminName",
  },
  {
    title: "更多信息",
    key: "action",
    scopedSlots: { customRender: "action" },
  },
];

const repairDatas = [
  {
    repairId: "10001",
    studentName: "黎明",
    state: 3,
    adminName: "王安石",
    subwayName: "李白",
    createDate: "2020-11-20 18:26:23",
    examineDate: "2020-11-21 10:15:45",
    repairDate: "2020-11-22 11:20:32",
    appointment: 5,
    detail: "卫生间第二个档堵",
    local: "西区 11公寓 533",
    repairImage: "",
  },
  {
    repairId: "10002",
    studentName: "黎明",
    state: 2,
    adminName: "王安石",
    subwayName: "李白",
    createDate: "2020-11-20 18:26:23",
    examineDate: "2020-11-21 10:15:45",
    repairDate: "",
    appointment: 5,
    detail: "卫生间第二个档堵",
    local: "西区 11公寓 533",
    repairImage:
      "https://www.bing.com/th?id=OHR.WCDBabyElephant_ZH-CN7844400740_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=HpEdgeAn",
  },
  {
    repairId: "10003",
    studentName: "黎明",
    state: 1,
    adminName: "王安石",
    subwayName: "李白",
    createDate: "2020-11-20 18:26:23",
    repairDate: "",
    appointment: 5,
    detail: "卫生间第二个档堵",
    local: "西区 11公寓 533",
  },
];
export default {
  name: "recode",
  data() {
    return {
      columns,
      repairDatas,
      modalVisible: false,
      currentReapir: {},
    };
  },
  methods: {
    showModal(action) {
      this.modalVisible = true;
      this.currentReapir = action;
    },
    handleOk(e) {
      console.log(e);
      this.modalVisible = false;
    },
  },
};
</script>

<style scoped>
.modal-name {
  margin: 10px 0;
}
.modal-context {
  margin-bottom: 10px;
}
.modal-context span {
  color: black;
  font-size: 20px;
}
</style>
